import { defineComponent, reactive, ref } from "vue";
import Page from "@/components/public/page/page";
import { CardWithTitle, Card } from "@/components/public/card/card";
import useNavigator from "@/hooks/useNavigator";
import styles from "./personalCenterPage.module.less";
import { UserOutlined } from "@ant-design/icons-vue";
import type { UploadProps } from "ant-design-vue";
import { getBase64ByFile } from "@/common/utils";
import { $uploadImg } from "@/api/frontUpload/frontUpload";
export default defineComponent({
  name: "personalCenterPage",
  setup() {
    const navigator = useNavigator();
    const state = reactive({
      file_list: [],
      old_password: '',
      new_password: '',
      new_password_again: '',
    } as any);
    //手动上传
    const beforeUploadPhoto: UploadProps["beforeUpload"] = (file: any) => {
      // getBase64ByFile(file)
      //   .then((base64_img: any) => {
      //     $uploadImg({ base64_img })
      //       .then((res: any) => {
      //         Object.keys(state.form).forEach((x: any) => {
      //           if (x != "order_no" && x != "payment_voucher") {
      //             if (file.uid == state.form[x][0].uid) {
      //               state.form[x][0].url = res.data?.url;
      //               return;
      //             }
      //           }
      //         });
      //       })
      //       .catch((error:any) => {

      //       });
      //   })
      //   .catch(() => {});
      return false;
    };
    const handlePreview = (file: UploadProps) => {
      console.log("hanle", file);
    };
    return () => (
      <Page>
        <Card>
          <div class={styles.center_head_box}>
            <div class={styles.head_left_box}>
              <a-upload
                list-type="picture"
                v-model:fileList={state.file_list}
                before-upload={beforeUploadPhoto}
                showUploadList={false}
              >
                <a-avatar size={80}>
                  <div class={styles.image_font_box}>
                    <UserOutlined />
                  </div>
                </a-avatar>
              </a-upload>
            </div>
            <div class={styles.head_right_box}>
              <div class={styles.head_right_row_box}>
                <div class={styles.row_left_box}>
                  用户名:
                </div>
                <div class={styles.row_right_box}>
                  dsflafjke
                </div>
              </div>
              <div class={styles.head_right_row_box}>
                <div class={styles.row_left_box}>
                  所属渠道:
                </div>
                <div class={styles.row_right_box}>
                  dsflafjke
                </div>
              </div>
              <div class={styles.head_right_row_box}>
                <div class={styles.row_left_box}>
                  手机号码:
                </div>
                <div class={styles.row_right_box}>
                  dsflafjke
                </div>
              </div>
            </div>
          </div>
        </Card>
        <div style={{ marginTop: "20px" }}>
          <CardWithTitle title="修改密码">
            <div class={styles.password_box}>
              <div class={styles['sign-rows']}>
                <div class={styles['sign-row']}>
                  <div class={styles['row-label']}>原密码</div>
                  <a-input type="password" v-model={state.old_password} placeholder="请输入原密码..." allowClear />
                </div>
                <div class={styles['sign-row']}>
                  <div class={styles['row-label']}>新密码</div>
                  <a-input type="password" v-model={state.old_password} placeholder="请输入新密码..." allowClear />
                </div>
                <div class={styles['sign-row']}>
                  <div class={styles['row-label']}>确认新密码</div>
                  <a-input type="password" v-model={state.old_password} placeholder="请再次输入新密码..." allowClear />
                </div>
              </div>
              <a-button class={styles['update-submit']} type="primary">确认</a-button>
            </div>
          </CardWithTitle>
        </div>
      </Page>
    );
  },
});
